<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 标题栏组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
  <style>
    .section-description {
      color: var(--color-font-secondary);
      margin-bottom: calc(24 * var(--unit));
      font-size: var(--font-size-body-medium);
      line-height: 1.6;
    }
    
    .example-section-title {
      border-bottom: 2px solid var(--color-brand);
      padding-bottom: calc(12 * var(--unit));
    }
    
    .titlebar-preview {
      min-height: calc(400 * var(--unit));
      background-color: var(--color-background-secondary);
      border-radius: calc(8 * var(--unit));
      position: relative;
      overflow: hidden;
      border: 1px solid var(--color-comp-divider);
      margin-top: calc(16 * var(--unit));
    }
    
    .titlebar-preview-content {
      padding: calc(24 * var(--unit));
      padding-top: calc(var(--titlebar-height) + calc(24 * var(--unit)));
      color: var(--color-font-secondary);
      font-size: var(--font-size-body-medium);
      line-height: 1.6;
    }
    
    /* 全屏背景图样式 */
    .fullscreen-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand60) 100%);
      z-index: -1;
    }
    
    .fullscreen-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="example-section">
      <h1 class="title title-large mb-medium">HarmonyOS 标题栏组件示例</h1>
      <p class="text text-secondary">本示例展示了 HarmonyOS 设计指南中定义的各种标题栏样式和使用场景</p>
    </div>
    
    <!-- 基础标题栏 -->
    <div class="example-section">
      <h2 class="example-section-title">基础标题栏</h2>
      <p class="section-description">基础标题栏包含标题和右侧操作按钮，适用于大多数页面场景。</p>
      <div class="titlebar-preview">
        <div class="titlebar normal">
          <div class="titlebar-left">
            <button class="titlebar-button" aria-label="返回">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
              </svg>
            </button>
          </div>
          <div class="titlebar-center">
            <h1 class="titlebar-title">基础标题</h1>
          </div>
          <div class="titlebar-right">
            <button class="titlebar-button" aria-label="菜单">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
              </svg>
            </button>
            <button class="titlebar-button" aria-label="更多">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="titlebar-preview-content">
          <p class="text">页面内容区域...标题栏固定在顶部，内容可以正常滚动。</p>
        </div>
      </div>
    </div>
    
    <!-- 强调型标题栏 -->
    <div class="example-section">
      <h2 class="example-section-title">强调型标题栏</h2>
      <p class="section-description">强调型标题栏高度更大，适用于一级界面突出标题区域，支持单行标题和双行标题。</p>
      <div class="titlebar-preview">
        <div class="titlebar emphasis">
          <div class="titlebar-left">
            <button class="titlebar-button" aria-label="返回">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
              </svg>
            </button>
          </div>
          <div class="titlebar-center">
            <h1 class="titlebar-title">强调型标题</h1>
            <p class="titlebar-subtitle">这是一个副标题，用于提供更多上下文信息</p>
          </div>
          <div class="titlebar-right">
            <button class="titlebar-button" aria-label="搜索">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
              </svg>
            </button>
            <button class="titlebar-button" aria-label="更多">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="titlebar-preview-content">
          <p class="text">页面内容区域...强调型标题栏提供更大的标题显示区域。</p>
        </div>
      </div>
    </div>
    
    <!-- 二级页标题栏 -->
    <div class="example-section">
      <h2 class="example-section-title">二级页标题栏</h2>
      <p class="section-description">二级页标题栏包含返回按钮、标题和右侧操作按钮，适用于所有非一级页面。</p>
      <div class="titlebar-preview">
        <div class="titlebar secondary">
          <div class="titlebar-left">
            <button class="titlebar-button back-button" aria-label="返回">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
              </svg>
            </button>
          </div>
          <div class="titlebar-center">
            <h1 class="titlebar-title">二级页面</h1>
          </div>
          <div class="titlebar-right">
            <button class="titlebar-button" aria-label="分享">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="titlebar-preview-content">
          <p class="text">页面内容区域...二级页面通常包含返回功能。</p>
        </div>
      </div>
    </div>
    
    <!-- 编辑界面标题栏 -->
    <div class="example-section">
      <h2 class="example-section-title">编辑界面标题栏</h2>
      <p class="section-description">编辑界面标题栏通常使用左侧关闭/取消、右侧确认的布局形式。</p>
      <div class="titlebar-preview">
        <div class="titlebar edit">
          <div class="titlebar-left">
            <span class="titlebar-text-button">取消</span>
          </div>
          <div class="titlebar-center">
            <h1 class="titlebar-title">编辑信息</h1>
          </div>
          <div class="titlebar-right">
            <span class="titlebar-text-button">确定</span>
          </div>
        </div>
        <div class="titlebar-preview-content">
          <p class="text">编辑界面内容区域...使用文本按钮进行取消和确认操作。</p>
        </div>
      </div>
    </div>
    
    <!-- 模糊背景标题栏 -->
    <div class="example-section">
      <h2 class="example-section-title">模糊背景标题栏</h2>
      <p class="section-description">模糊背景效果可以使标题栏与下方内容形成层次感，提升视觉体验。</p>
      <div class="titlebar-preview">
        <div class="fullscreen-bg"></div>
        <div class="titlebar blur-enabled">
          <div class="titlebar-left">
            <button class="titlebar-button" aria-label="返回">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
              </svg>
            </button>
          </div>
          <div class="titlebar-center">
            <h1 class="titlebar-title">模糊背景</h1>
          </div>
          <div class="titlebar-right">
            <button class="titlebar-button" aria-label="搜索">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="titlebar-preview-content">
          <p class="text">页面内容区域...模糊背景效果提供更好的视觉层次。</p>
        </div>
      </div>
    </div>
    
    <!-- 全屏标题栏 -->
    <div class="example-section">
      <h2 class="example-section-title">全屏标题栏</h2>
      <p class="section-description">全屏标题栏适用于图片浏览等场景，背景透明且内容为白色。</p>
      <div class="titlebar-preview">
        <div class="fullscreen-bg"></div>
        <div class="titlebar fullscreen">
          <div class="titlebar-left">
            <button class="titlebar-button" aria-label="返回">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
              </svg>
            </button>
          </div>
          <div class="titlebar-center">
            <h1 class="titlebar-title">全屏浏览</h1>
          </div>
          <div class="titlebar-right">
            <button class="titlebar-button" aria-label="更多">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 半模态标题栏 -->
    <div class="example-section">
      <h2 class="example-section-title">半模态标题栏</h2>
      <p class="section-description">半模态标题栏适用于需要与底层内容保持视觉联系的场景，通常带有模糊效果。</p>
      <div class="titlebar-preview">
        <div class="fullscreen-bg"></div>
        <div class="titlebar semi-modal">
          <div class="titlebar-left">
            <button class="titlebar-button" aria-label="关闭">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
              </svg>
            </button>
          </div>
          <div class="titlebar-center">
            <h1 class="titlebar-title">半模态窗口</h1>
          </div>
          <div class="titlebar-right">
            <button class="titlebar-button" aria-label="确认">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="titlebar-preview-content">
          <p class="text">半模态内容区域...半模态标题栏保持与底层内容的视觉联系。</p>
        </div>
      </div>
    </div>
    
    <!-- 抽屉型标题栏 -->
    <div class="example-section">
      <h2 class="example-section-title">抽屉型标题栏</h2>
      <p class="section-description">抽屉型标题栏用于展示不同的分类，可以快捷地进行切换、查找。</p>
      <div class="titlebar-preview">
        <div class="titlebar drawer">
          <div class="titlebar-left">
            <button class="titlebar-button drawer-button" aria-label="菜单">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
              </svg>
            </button>
          </div>
          <div class="titlebar-center">
            <h1 class="titlebar-title">分类浏览</h1>
          </div>
          <div class="titlebar-right">
            <button class="titlebar-button" aria-label="搜索">
              <svg class="titlebar-icon" viewBox="0 0 24 24" fill="currentColor">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="titlebar-preview-content">
          <p class="text">分类内容区域...抽屉型标题栏方便快速切换分类。</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>